<template>
  <div class="goods-card">
    <div
      class="card-img"
      @touchstart.capture="touchStart"
      @touchmove.capture="touchMove"
      @touchend.capture="touchEnd"
    >
      <img src="@/assets/clothing.webp" alt="" ref="img" />
    </div>
    <div class="goods-info">
      <div class="title van-multi-ellipsis--l2">{{ data.cardTitel }}</div>
      <div class="money">
        <div>
          ￥<span class="number">{{ data.price }}</span>
          <span class="quantity">销量{{ data.quantity }}+</span>
        </div>
      </div>
      <div class="tags">
        <div v-for="(item, i) in data.tags" :key="i">{{ item }}</div>
      </div>
      <div class="address van-ellipsis">{{ data.address }}</div>
      <div class="count">
        <div class="subtract" @touchend="cardSetCount(data.id, -1)" v-if="num">
          <van-icon name="minus" size="15" />
        </div>
        <div class="count-number" v-if="num">{{ num }}</div>
        <div class="push" @touchend="cardSetCount(data.id, 1)">
          <van-icon name="plus" size="15" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Animation from "@/tools/cardAnimation/CardAnimation";
export default {
  props: {
    data: Object,
    num: Number,
    nofly: {
      type: Boolean,
      defalut: false,
    },
  },
  data() {
    return {
      touch: {}, //记录开始到结束移动的距离
      timeId: null, //计时器id
    };
  },
  methods: {
    //商品加入购物车
    cardSetCount(id, num) {
      this.$store.commit("localNumList", { id, num });
      //判断是否有飞入购物车动画
      if (num === -1 || this.nofly) return;

      //计算飞入购物车距离
      const src = this.$refs.img.src;
      //const { offsetWidth: imgWidth, offsetHeight: imgHeight } = this.$refs.img; //获取图片宽高
      const {
        left: imgLeft,
        top: imgTop,
        width: imgWidth,
        height: imgHeight,
      } = this.$refs.img.getBoundingClientRect(); //获取图片位置
      const shopCard = document.querySelector(".shop-card"); //获取购物车
      const {
        left: cardLeft,
        top: cardTop,
        width: cardWidth,
        height: cardHeight,
      } = shopCard.getBoundingClientRect(); //获取购物车位置和宽高
      //获取购物车宽高
      //const { offsetHeight: cardHeight, offsetWidth: cardWidth } = shopCard;
      const endX = cardLeft + cardWidth / 2, //因为只有两个TabBar宽度会比较宽需要在减少一些宽度
        endY = cardTop + cardHeight / 2;

      Animation({
        startY: imgTop,
        startX: imgLeft,
        endY,
        endX,
        src,
        width: imgWidth,
        height: imgHeight,
      });
    },
    /**
     * 判断用户是滑动还是点击来进入商品详情页
     */
    touchStart(e) {
      const start = e.changedTouches[0];
      this.touch.x1 = start.pageX;
      this.touch.y1 = start.pageY;
    },
    touchMove(e) {
      clearTimeout(this.timeId);
      this.timeId = setTimeout(() => {
        const Move = e.changedTouches[0];
        this.touch.x2 = Move.pageX;
        this.touch.y2 = Move.pageY;
      }, 30);
    },
    touchEnd(e) {
      let end = e.changedTouches[0];
      this.touch.x2 = end.pageX;
      this.touch.y2 = end.pageY;
      let diffY = this.touch.y2 - this.touch.y1;
      let diffX = this.touch.x2 - this.touch.x1;
      if (diffY <= 10 && diffY >= -10 && diffX <= 10 && diffX >= -10) {
        //跳转商品详情页
        this.$router.push({ path: "/goodspron", query: { id: this.data.id } });
      }
      //如果上下滑动幅度过大关闭左右切换
      if ((diffY > 100 || diffY < -100) && this.$route.name === "GoodsList") {
        this.$store.commit("setTouchStatus", false);
      }
      return;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../css/GoodsCard.scss";
</style>
